<template>
  <div>
    <!-- <table class="pure-table pure-table-horizontal">
      <tr style="background-color:#f0f0f0">
        <th v-for="(item,index) in typeList" :key="index">{{ item }}</th>
      </tr>
      <tr v-for="(item,index) in tableData" :key="index" class="highlight">
        <td v-for="(i,key) in item" :key="key">{{ i }}</td>
      </tr>
    </table> -->

    <el-table
      v-loading="loading"
      :data="list"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="name"
        width="150"
        align="center"
        label="尺寸\价格"
        fixed
      />
      <template v-for="(col,i) in dataList">
        <el-table-column
          :key="col"
          :show-overflow-tooltip="true"
          :label="col"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope">
            <span>
              {{ scope.row.list[i].id||0 }}
            </span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
import { queryDetailByAreaCode } from '@/api/display/recommend'
export default {
  name: 'DetaiTable',
  props: {
    code: {
      type: String,
      default: ''
    },
    conventionNum: {
      type: Number,
      default: 0
    },
    shopCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      dataList: [],
      typeList: [],
      tableData: []
    }
  },
  // watch: {
  //   code: {
  //     handler(v) {
  //       this.getData(v)
  //     }
  //   }
  // },
  created() {
    this.getData(this.code)
  },
  methods: {
    getData(v) {
      if (!v) return
      this.loading = true
      queryDetailByAreaCode(v, this.conventionNum, this.shopCode).then(res => {
        this.loading = false
        if (res.success && res.data) {
          const resData = res.data
          // this.tableData = Object.values(resData)// 横向数据
          const keys = Object.keys(resData)// 纵向属性
          this.typeList = keys
          this.dataList = Object.keys(Object.values(resData)[0])
          keys.forEach((v, index) => {
            this.list.push({
              id: index, name: v, list: Object.values(resData[v]).map(i => { return { id: i || '0' } })
            })
          })
        }
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>

td,th {
    padding: 0;
}
.pure-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}

.pure-table caption {
    color: #000;
    font: italic 85%/1 arial,sans-serif;
    padding: 1em 0;
    text-align: center;
}

.pure-table td,.pure-table th {
    border-left: 1px solid #cbcbcb;
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: .5em 1em;
}

.pure-table thead {
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
}

.pure-table td {
    background-color: transparent;
}
.pure-table-horizontal td,.pure-table-horizontal th {
    border-width: 0 0 1px 0;
    border-bottom: 1px solid #cbcbcb;
}

.pure-table-horizontal tbody>tr:last-child>td {
    border-bottom-width: 0;
}
/deep/.highlight:hover{
    background-color:rgba(135, 206, 250, 0.3);
}
</style>
